<template>
  <div>
    <el-dialog :title="form.id?'修改':'新增'" top="5vh" :visible.sync="visible" width="60%" center @close="handleClose" @open="openDialog">
      <el-form ref="form" :model="form" v-loading="formLoaidng" :rules="rules" label-width="120px">
        <el-form-item label="所属分类：" prop="study_type">
          <el-cascader style="width:500px" :disabled="Boolean(parentId||form.id)" :options="tree" @change="parentIdChange" v-model="form.study_type" :props="{ label:'study_type_name',value:'id',children:'studying_types',checkStrictly: true }" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="课程名称：" prop="study_name">
          <el-input style="width:500px" v-model="form.study_name" maxlength="20" placeholder="课程名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="课程缩略图：" prop="study_url">
          <uploadImg @updataImg="updataImg" :limit="1" :value="blackImg" :dialogVisible="visible" style="" :zi='true'></uploadImg>
        </el-form-item>
        <el-form-item label="讲师名称：" prop="study_teacher">
          <el-input style="width:500px" v-model="form.study_teacher" maxlength="9" placeholder="讲师名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="会员专享：" prop="has_vip">
          <el-switch v-model="form.has_vip">
          </el-switch>
        </el-form-item>
        <el-form-item label="序号：" prop="has_order">
          <el-input-number v-model="form.has_order" :precision="0" :min="1" label="序号"></el-input-number>
        </el-form-item>
        <el-form-item label="课程详情：" prop="study_content">
          <div>
            <editor :heightMultiple="1.1" height="400" :value="form.study_content" @getTxt="getEditor"></editor>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import videoStudyApi from '@/api/videoStudyApi.js'
import uploadImg from '@/views/modules/oss/oss-uploadImg'
import editor from '@/components/editor.vue'
export default {
  components: {
    uploadImg,
    editor
  },
  data () {
    return {
      form: {},
      blackImg: [],
      rules: {
        study_type: [
          { required: true, message: '请输入所属分类', trigger: 'change' },
        ],
        study_name: [
          { required: true, message: '请输入课程名称', trigger: 'change' },
        ],
        // study_url: [
        //   { required: true, message: '请上传缩略图', trigger: 'change' },
        // ],
        study_teacher: [
          { required: true, message: '请输入讲师名称', trigger: 'change' },
        ],
        has_order: [
          { required: true, message: '请输入序号', trigger: 'change' },
        ],
        study_content: [
          { required: true, message: '请输入课程详情', trigger: 'change' },
        ]
      },
      formLoaidng: false,
      btnLoading: false
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number | String
    },
    tree: {
      type: Array,
      default: () => { return [] }
    },
    parentId: {
      type: Number | String
    }
  },
  computed: {
    visible: {
      get () {
        return this.show
      },
      set (val) {
        this.$emit("update:show", val)
      }
    }
  },
  methods: {
    //上传之后
    updataImg (e) {
      this.form.study_url = e[0]
    },
    // 富文本的回调
    getEditor (e) {
      this.form.study_content = e
    },
    // 开启弹窗时
    openDialog () {
      if (this.parentId) {
        this.form.study_type = this.parentId;
        this.$forceUpdate()
      }
      if (this.id) {
        this.getDetails()
      }
    },
    parentIdChange (e) {
      if (e && e.length > 0) {
        this.form.study_type = e[e.length - 1]
      } else {
        this.form.study_type = ''
      }
    },
    // 获取详情
    getDetails () {
      this.formLoaidng = true;
      videoStudyApi.studyingInfo(this.id).then(res => {
        if (res && res.data.code == 200) {
          this.form = res.data.data;
          this.blackImg = [this.form.study_url]
        }
        this.formLoaidng = false;
      })
    },
    // 关闭弹窗
    handleClose () {
      this.form = {};
      this.$refs.form.resetFields();
      this.visible = false;
    },
    // 提交
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.form.has_vip) this.form.has_vip = false
          if (this.form.id) {
            this.update()
          } else {
            this.add()
          }
        }
      })
    },
    // 新增
    add () {
      this.form.study_type = this.form.study_type || this.parentId
      this.btnLoading = true;
      videoStudyApi.studyingAdd(this.form).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('新增成功！');
          this.$emit('change')
          this.handleClose()
        }
        this.btnLoading = false;
      })
    },
    // 修改
    update () {
      this.btnLoading = true;
      videoStudyApi.studyingUpdate(this.form).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('修改成功！');
          this.$emit('change')
          this.handleClose()
        }
        this.btnLoading = false;
      })
    }
  }
}
</script>

<style>
</style>